// 修改信息页面

import './index.less';
import {View} from "@tarojs/components";
import {AvatarRow, Divider, FormItem} from "../../components/userInfoCmpt";
import {GLOBAL_IMAGE} from "../../constant/contant";
import Taro from "@tarojs/taro";
import {useState} from "react";
import {connect} from "react-redux";
import {Api, API_PATH} from "../../api/api";
import {wxActions} from "../../utils/wxActions";

function UserInfo(props) {
    const {reduxUserInfo, dispatch} = props;

    // 跳转到修改信息页面
    const goToUpdateInfo = (title, value, placeholder, typeId) => () => {
        Taro.navigateTo({
            url: `/pages/updateInfo/index?title=${title}&value=${value}&placeholder=${placeholder}&typeId=${typeId}`
        })
    }

    // 设置地区
    const setAddress = (value) => {
        Api.editUser({
            address: value
        }).then(res => {
            wxActions.refreshUserInfo(dispatch); // 刷新用户信息
        })
    }

    return (
        <View className='userInfo'>
            <View className={"avatar_row"}>
                <AvatarRow
                    dispatch={dispatch}
                    avatarUrl={reduxUserInfo?.avatar ? API_PATH + reduxUserInfo.avatar : GLOBAL_IMAGE.default_avatar}/>
            </View>
            <View className={"line_row"}>
                <Divider/>
            </View>
            <FormItem
                title={"用户名"}
                value={reduxUserInfo.nickName}
                placeholder={"请输入用户名"}
                handleClick={goToUpdateInfo("用户名", reduxUserInfo.nickName, "请输入用户名", "1")}
            />
            <FormItem
                title={"手机号"}
                value={reduxUserInfo.phonenumber}
                placeholder={"请输入手机号"}
                handleClick={goToUpdateInfo("手机号", reduxUserInfo.phonenumber, "请输入手机号", "2")}
            />
            <FormItem
                title={"电子邮箱"}
                value={reduxUserInfo.email}
                placeholder={"请输入电子邮箱"}
                handleClick={goToUpdateInfo("电子邮箱", reduxUserInfo.email, "请输入电子邮箱", "3")}
            />
            <FormItem
                title={"所在地区"}
                value={reduxUserInfo.address}
                placeholder={"请选择"}
                isSelect={true}
                setValue={setAddress}
            />
        </View>
    )
}

const mapStateToProps = (state) => ({
    reduxUserInfo: state.userState.reduxUserInfo
})

export default connect(mapStateToProps)(UserInfo);
